<template>
  <div class="province">
    <MainSlot>
      <span slot="title">省份信息维护</span>
      <button slot="one" @click="add">添加省份</button>
      <button slot="two" @click="update">编辑省份</button>
      <button slot="three" @click="del">删除省份</button>
      <button slot="four">退出</button>
    </MainSlot>

    <div class="zzc" v-if="isShow">
      <div class="add">
        <div class="title">{{ title }}</div>
        <div class="container">
          <div class="item">
            <span>省份代码：</span>
            <el-input v-model="sfdm" placeholder=""></el-input>
          </div>
          <div class="item">
            <span>省份名称：</span>
            <el-input v-model="sfmc" placeholder=""></el-input>
          </div>
          <div class="item">
            <el-checkbox v-model="zyzhgg" label="专业综合改革" :disabled="able"></el-checkbox>
            <el-checkbox v-model="jhfb" label="计划发布"></el-checkbox>
          </div>
          <button @click="ok">{{ info }}</button>
          <button @click="cancel">退出</button>
        </div>
      </div>
    </div>

    <el-table ref="singleTable" :data="tableData" height="720" border style="width: 100%" highlight-current-row @current-change="handleChange">
      <!-- <el-table-column prop="n1" label="序号" width="240"> </el-table-column> -->
      <el-table-column type="index" label="序号" width="240"></el-table-column>
      <el-table-column prop="sfdm" label="省份代码" width="300">
      </el-table-column>
      <el-table-column prop="sfmc" label="省份名称"> </el-table-column>
      <el-table-column prop="tdlx" label="专业综合改革" width="300">
      </el-table-column>
      <el-table-column prop="jhfb" label="计划发布" width="300">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { request } from "../../../network/request";
import MainSlot from "../../common/MainSlot";
export default {
  name: "",
  data() {
    return {
      able: false,
      isShow: false,
      title: "添加省份",
      info: "添加",
      tableData: [],
      sfdm: "",
      sfmc: "",
      zyzhgg: false,
      jhfb: false,
    };
  },
  methods: {
    handleChange(val) {
      if(val == null) {
        return
      }
      this.sfdm = val.sfdm
      this.sfmc = val.sfmc
      if(val.tdlx == '1') {
        this.zyzhgg = true
      }else {
        this.zyzhgg = false
      }
      if(val.jhfb == '1') {
        this.jhfb = true
      }else {
        this.jhfb = false
      }
    },
    add() {
      this.sfdm = ''
      this.sfmc = ''
      this.zyzhgg = false
      this.jhfb = false
      this.title = "添加省份";
      this.info = "添加";
      this.isShow = true;
      this.able =  false;
    },
    update() {
      this.title = "编辑省份";
      this.info = "修改";
      this.isShow = true;
      this.able =  true;
    },
    del() {
      let a = prompt("请输入需要删除的省份代码：");
      if (a != null && a != "") {
        // alert("删除成功");
        request({
          url: "http://118.31.51.131:8081/api/zsxt/sfdm/sc",
          method: "post",
          params: {
            sfdm: a,
            token: sessionStorage.getItem("token"),
          },
        }).then((value) => {
          console.log(value);
          request({
            url: "http://118.31.51.131:8081/api/zsxt/sfdm/ck",
            method: "post",
            params: {
              token: sessionStorage.getItem("token"),
            },
          }).then((value) => {
            console.log(value);
            this.tableData = value.data;
          });
        });
      }
    },
    ok() {
      if (this.sfdm == "" || this.sfmc == "") {
        alert("请填写省份代码和省份名称");
      }

      if (this.sfdm != "" && this.sfmc != "" && this.title == "添加省份") {
        request({
          url: "http://118.31.51.131:8081/api/zsxt/sfdm/tj",
          method: "post",
          data: {
            jhfb: Number(this.jhfb).toString(),
            sfdm: this.sfdm,
            sfmc: this.sfmc,
            tdlx: Number(this.zyzhgg).toString(),
          },
          params: {
            token: sessionStorage.getItem("token"),
          },
        }).then((value) => {
          console.log(value);
          request({
            url: "http://118.31.51.131:8081/api/zsxt/sfdm/ck",
            method: "post",
            params: {
              token: sessionStorage.getItem("token"),
            },
          }).then((value) => {
            console.log(value);
            this.tableData = value.data;
          });
          this.isShow = false;
        });
      }

      if (this.sfdm != "" && this.sfmc != "" && this.title == "编辑省份") {
        request({
          url: "http://118.31.51.131:8081/api/zsxt/sfdm/xg",
          method: "post",
          data: {
            jhfb: Number(this.jhfb).toString(),
            sfdm: this.sfdm,
            sfmc: this.sfmc,
            tdlx: Number(this.zyzhgg).toString(),
          },
          params: {
            token: sessionStorage.getItem("token"),
          },
        }).then((value) => {
          console.log(value);
          request({
            url: "http://118.31.51.131:8081/api/zsxt/sfdm/ck",
            method: "post",
            params: {
              token: sessionStorage.getItem("token"),
            },
          }).then((value) => {
            console.log(value);
            this.tableData = value.data;
          });
          this.isShow = false;
        });
      }
    },
    cancel() {
      this.isShow = false;
    },
  },
  created() {
    request({
      url: "http://118.31.51.131:8081/api/zsxt/sfdm/ck",
      method: "post",
      params: {
        token: sessionStorage.getItem("token"),
      },
    }).then((value) => {
      console.log(value);
      this.tableData = value.data;
    });
  },
  beforeCreate() {
    if (sessionStorage.getItem("token") == null) {
      this.$router.push("/login");
    } else {
      let token = sessionStorage.getItem("token");
      let length = sessionStorage.getItem("token").length;
      if (token[length - 6] == "0") {
        this.$router.replace("/login");
      }
    }
  },
  components: {
    MainSlot,
  },
};
</script>

<style scoped>
.zzc {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  z-index: 1;
}
.zzc .add {
  position: absolute;
  left: calc(50% - 180px);
  top: calc(50% - 200px);
  height: 400px;
  width: 500px;
  border-radius: 50px;
  background-color: #fff;
}
.zzc button {
  width: 120px;
  height: 36px;
  border: none;
  outline: none;
  cursor: pointer;
  color: #fff;
  background-color: rgb(192, 51, 56);
}
.zzc button:active {
  opacity: 0.8;
}
.zzc button:nth-of-type(1) {
  margin: 20px 0 0 100px;
}
.zzc button:nth-of-type(2) {
  margin: 20px 0 0 60px;
}
.add .title {
  height: 80px;
  line-height: 80px;
  text-align: center;
  font-size: 24px;
  /* font-weight: 700; */
}
.container .item {
  height: 60px;
  text-align: center;
}
.el-input {
  width: 200px;
}
.el-checkbox {
  margin-top: 15px;
}
.province ::v-deep .el-checkbox__label {
  font-size: 18px;
  /* width: 100px; */
}
.province ::v-deep .el-table .cell {
  text-align: center;
}
</style>